<template>
  <div>
    <Header/>
    <div class="info" v-for="(item,index) of shopCar" :key="item.id">
      <img :src="item.img" class="img">
      <span>{{item.type}}</span>
      <s>{{item.d_price}}</s>
      <span>{{item.price}}</span>
      <div>
        <button @click="item.count>1?item.count--:''">-</button>
        <input type="text" class="input" v-model="item.count">
        <button @click="item.count++">+</button>
      </div>
      <button @click="delProduct(index)">删除</button>
    </div>
  </div>
</template>

<script>
import Header from '../components/header.vue'
  export default {
  components: { Header },
  data() {
    return {
      shopCar:[]
    }
  },
  mounted() {
    let data=this.$store.state.shopCart
    this.shopCar=data
    console.log('深刻的撒哈拉的撒哈拉',data);
  },
  methods: {
    delProduct(index) {
      this.shopCar.splice(index,1)
      this.$store.commit('delShopCar',this.shopCar)
    }
  },
}
</script>

<style lang="scss" scoped>
.info{
  width: 85%;
  margin: 0 auto;
  display: flex;
  margin-top: 50px;
  justify-content: space-around;
  border: 1px solid black;
  padding: 5px 0;
  img{
    width: 80px;
    height: 88px;
  }
  div{
    width: 120px;
    button{
      width: 25px;
    }
  }
  .input{
    width: 60px;
  }
}
</style>